<template>
  <div v-show="essayList.length > 0" :class="['essay-list', $ua.isFromPc() ? 'z-web' : 'z-phone']">
    <div class="title">
      <div class="essay-list-title">
        博文广记
      </div>
    </div>
    <div class="essay-list">
      <div class="essay-item" v-for="(item, index) in essayList" @click="goDesc(item.data_id)" :key="index">
        <div class="left-image">
          <el-image
            fit="cover"
            :src="item.show_url_list[0]"
            alt=""
          >
            <div slot="error" class="image-slot all-center">
              暂无图片
            </div>
          </el-image>
        </div>
        <div class="right-info">
          <div class="right-info-title" :title="item.title">
            {{ item.title }}
          </div>
          <div class="line">

          </div>
          <div class="right-info-desc" :title="sliceRichText(item.content)" v-html="sliceRichText(item.content)"/>
        </div>
      </div>
    </div>
    <Pagin
      ref="page"
      v-show="essayList.length !== 0"
      :func="getDataList"
      :pagesSizes="[10, 20, 30, 50]"
      :sizeNum="10"
      :layout="'prev, pager, next'"
      :background="true"
      :position="'center'"
      class="pagin"
    ></Pagin>
  </div>
</template>

<script>
import { getImgUrl } from '@/utils/downloadFile'
export default {
  name: '',
  components: {},
  data () {
    return {
      essayList: []
    }
  },
  computed: {

  },
  watch: {},
  created () {},
  mounted () {
    this.refresh();
    console.log('获取大事记')
  },
  methods: {
    sliceRichText(richText) {
      // 查找第一个<p的起始位置
      let startIndex = richText.indexOf('<p');
      if (startIndex === -1) {
        return '文本内容过长，请到详情页查看详细内容'
      }

      // 查找对应的</p>的结束位置
      let endIndex = richText.indexOf('</p>', startIndex);
      if (endIndex === -1) {
        return '文本内容过长，请到详情页查看详细内容'
      }

      // 检查<p>标签内是否包含<img>
      if (richText.substring(startIndex, endIndex).indexOf('<img') !== -1) {
        return '文本内容过长，请到详情页查看详细内容'
      }

      // 截取内容（不包括<p>和</p>标签）
      let content = richText.substring(startIndex, endIndex + '</p>'.length);

      // 输出结果
      console.log(content); // 输出第一个不包含<img>的<p>元素的内容
      if (content) {
        return content
      } else {
        return '文本内容过长，请到详情页查看详细内容'
      }
    },
    goDesc(data_id) {
      this.$router.push({ path: '/dynamic/articleDesc', query: { data_id } })
    },
    refresh() {
      this.$refs.page.refresh();
    },
    getDataList(page, page_size, callback) {
      const params = {
        page_num: page,
        page_count: page_size,
        // userid: this.$route.query.id
      }
      this.$api.getEssay(params).then((res) => {
        this.essayList = Array.isArray(res.result.item_list) ? res.result?.item_list : [];
        callback(this.essayList, res.result.total_count);
      });
    },
  }
}
</script>

<style scoped lang="less">
.essay-list {
  &.z-web {
    padding: 0 276px 100px;
    background: #fff;
    position: relative;

    .essay-list-title {
      font-size: 44px;
      font-weight: 600;
      color: #000;
      position: absolute;
      left: 173px;
      margin-top: 5px;
    }

    .essay-list {
      display: grid;
      justify-content: space-between;
      grid-template-columns: repeat(auto-fill, 675px);
      grid-gap: 10px;
      margin-bottom: 25px;

      .essay-item {
        width: 675px;
        height: 350px;
        padding: 15px;
        display: flex;
        box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.5);
        cursor: pointer;

        .left-image {
          // width: 400px;
          height: 100%;

          ::v-deep(.el-image) {
            width: 420px;
            height: 100%;
          }
        }

        .right-info {
          // max-width: 155px;
          padding: 40px 20px;

          .right-info-title {
            font-size: 22px;
            color: #000;
            font-weight: 600;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; /* 定义文本的行数 */
            overflow: hidden;
            text-overflow: ellipsis;
            position: relative;
          }

          .line {
            width: 100%;
            height: 1px;
            background-color: #999;
            margin: 15px 0 25px;
          }

          .right-info-desc {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3; /* 显示3行 */
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }

  &.z-phone {
    padding: pxtorem(40) pxtorem(24) pxtorem(40);
    .title {
      .essay-list-title {
        writing-mode: lr;
        font-size: pxtorem(36);
        font-weight: 600;
        color: #000;
        // margin-top: pxtorem(32);
        letter-spacing: pxtorem(10);
        margin-bottom: pxtorem(32);
      }
    }

    .art-work-box {
      .art-work-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .content {
          margin-bottom: pxtorem(40);
          .img-content {
            width: pxtorem(340);
            height: pxtorem(254);
            position: relative;

            ::v-deep(.el-image) {
              width: 100%;
              height: 100%;
            }

            .tag {
              position: absolute;
              bottom: 0;
              left: 0;
              width: pxtorem(120);
              height: pxtorem(36);
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: #F7E6D0;
              font-size: pxtorem(18);
              font-weight: 600;
            }
          }

          .title {
            width: pxtorem(340);
            margin-top: pxtorem(16);
            font-size: pxtorem(22);
            font-weight: 600;
            color: #000;
            overflow: hidden; //超出的文本隐藏
            text-overflow: ellipsis; //溢出用省略号显示
            white-space: nowrap;
          }
          .collect,
          .second-title {
            font-size: pxtorem(22);
            font-weight: 600;
            color: #999999;
            .author {
              margin-bottom: pxtorem(10);
            }
          }
        }
      }
    }
  }
}
</style>
